<template>
    <main style="width: 100%;height: 308px; background-color: rgba(255, 255, 203, 0.5); ">
        <div style="width: 100%; height: 280px;">
            <HomeFilledwd v-if="valuess == 'HomeFilled'" @openbutt="fonscore"/>
            <localscores v-else-if="valuess == 'MessageBox'" :filecarlist="txtFilelist"/>
            <routine v-else-if="valuess == 'Memo'" />
            <collection v-else-if="valuess == 'Collection'" />
        </div>
        <div style="width: 100%; height: 28px; ">
            <div class="custom-style">
                <el-segmented v-model="valuess" :options="options" size="small" block @click="red">
                    <template #default="scope">
                        <el-icon size="20">
                            <component :is="scope.item.icon" />
                        </el-icon>
                    </template>
                </el-segmented>
            </div>
        </div>
    </main>
</template>


<script lang="ts" setup>
import { MessageBox, HomeFilled, Memo, Collection, Ticket } from '@element-plus/icons-vue'
import routine from "./routine/index.vue"
import collection from "./collection/index.vue"
import localscores from "./Localscores/index.vue"
import HomeFilledwd from "./HomeFilled/index.vue"
import { ref, onMounted } from "vue"
const valuess = ref('HomeFilled')
const txtFilelist = ref<{ name: string }[]>([]);
const red = () => {
    console.log(valuess.value);
}
const options = [
    {
        label: 'HomeFilled',
        value: 'HomeFilled',
        icon: HomeFilled,
    },
    {
        label: 'MessageBox',
        value: 'MessageBox',
        icon: MessageBox,
    },
    {
        label: 'Memo',
        value: 'Memo',
        icon: Memo,
    },
    {
        label: 'Collection',
        value: 'Collection',
        icon: Collection,
    },
    {
        label: 'Ticket',
        value: 'Ticket',
        icon: Ticket,
    }
]

const tabdatalist = () => {
  try {
    const txtFiles = import.meta.glob("/src/assets/scores/*.txt", {
      eager: true,
    });
    const fileObjectArray: { name: string }[] = [];
    for (const path in txtFiles) {
      const filename = path.split("/").pop();
      if (filename) {
        const cleanFilename = filename.replace(".txt", "");
        const fileObject = { name: cleanFilename };
        fileObjectArray.push(fileObject);
      }
    }
    txtFilelist.value = fileObjectArray;
    console.log(txtFilelist.value);
  } catch (error) {
    console.error("获取文件时出错:", error);
  }
};
const fonscore = () => {
    valuess.value = 'MessageBox'
}
onMounted(async () => {
  tabdatalist();
});
</script>
<style scoped>
.custom-style .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #ffd100;
    --el-border-radius-base: 16px;
}
</style>